<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JSONP</title>
</head>
<body>
  <div class="dropdown">
    <input type="text" name="q" autocomplete="off" id="">
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    /**
     * 跨域
     *    同源策略：域名、协议、端口相同
     * 解决跨域
     *    跨域资源共享（CORS）
     *    使用JSONP
     *    修改document.domain
     *    window.name
     * JSONP
     *    json with padding JSONP的组成：回调函数和数据
     *    原理：引入不同域的js脚本文件是可以的
     *        通过script标签引入js文件
     *        js文件载入成功后
     *        执行我们在url参数中指定的函数
     * 
     * src href 可以跨域 利用可以访问别的域名的属性
     */
    
    // 封装JSONP 动态创建script标签，通过src进行跨域
    // 1.处理url，后面跟参数
    function getJSONP(url, callback){
      if(!url){
        return;
      }
      var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
          r1 = Math.floor(Math.random()*10), // random [0~1)
          r2 = Math.floor(Math.random()*10),
          r3 = Math.floor(Math.random()*10),
          // name = 'getJSONP' + a[r1] + a[r2] + a[r3], // 生成随机的函数名
          fnName = 'cb',
          cbname = 'getJSONP.' + fnName; // getJSONP.getJSONPbca([{a:1,b:2}])
      // 判断url地址中是否含有？号
      if(url.indexOf('?') === -1){
        url += '?jsonp=' + cbname
      } else {
        url += '&jsonp=' + cbname
      }
      // 动态创建script标签
      var script = document.createElement('script')
      // 定义被脚本执行的函数
      getJSONP[fnName] = function(json){
        try{
          callback && callback(json)
        } catch(e) {

        } finally {
          // 最后删除该函数
          delete getJSONP[fnName]
          script.parentNode.removeChild(script)
        }


      }
      script.src = url
      document.getElementsByTagName('head')[0].appendChild(script)
      // http://www.baidu.com?callback=abc 你需要给服务器的就是函数名
      // abc([{user:1},{id:2}]) 服务端传给客户端的数据
    }
    
    // getJSONP('jsonp.js',function(data){
    //   console.log(data)
    // })

    /**
     * js改变背景颜色--重绘
     * js改变div宽高--回流
     */
    (function($){
      'use strict'
      $.fn.extend({
        dropdown: function(){

        }
      })
    })(jQuery)
   

    $('.dropdown').dropdown();
    
    // 回调形式解决解耦合
    var silent = {
      show: function($el, showCallback, shownCallback){
        if(typeof showCallback === 'function') showCallback()
        $el.show()
        if(typeof shownCallback === 'function') shownCallback()
      }
    }
    // typeof值 object({}、[]、null) undefined function string number boolean
    console.log(Object.prototype.toString.call([])) // [object Array]
    function init($el, hiddenCallback){
      // $el.addClass("transition")
      if($el.is(':hidden')){
        $el.data('status', 'hidden')
        if(typeof hiddenCallback === 'function') hiddenCallback();
        $el.addClass("fadeOut")
      }else{
        $el.data('status', 'shown')
      }
    }

    // 发布订阅模式适合多人开发

    var slient = {
      init: function($el){
        $el.addClass("transition")
        if($el.is(':hidden')){
          $el.data('status', 'hidden')
          $el.addClass("fadeOut")
        }else{
          $el.data('status', 'shown')
        }
      },
      show: function($el){
        if($el.data('status') === 'show') return;
        if($el.data('status') === 'shown') return;
        $el.data('status', 'show').trigger('show')
        $el.show();
        $el.data('status', 'shown').trigger('shown')
      }
    }
    var $box = $("#box")
    slient.init($box)
    $box.on('show shown', function(e){
      if(e.type === 'show'){

      }else if(e.type === 'shown'){

      }
    })


    // css3
    var css3 = {
      fade: {
        show: function($el){
          $el.css({
            'visibility': 'visible',
            'opacity':'1'
          })
          $el.show()
          setTimeout(function(){
            $el.removeClass("fadeOut")
          })
        },
        hide: function($el){
          $el.on('transitionend', function(){
            $el.hide()
          })
          $el.addClass('fadeOut')
        }
      },
      slideUpDown:{
        init: function($el){
          $el.height($el.height())
          $el.addClass('transition')
          var styles = {}
          style['width'] = $el.css('width')
        },
        show: function($el){
          $el.show()
          $elem.animate({

          })
        },
        hide: function(){

        }
      }
    }
  </script>
  <script src="transition.js"></script>
  <script>
    console.log(mt.transition)

    var defaults = {
      css3: false,
      js: false,
      animation: 'fade'
    }

    function showHide($el, options){
      options = $.extend({}, defaults, options)
      if(options.css3 && transition.isSupport){
        css3[options.animation].init($el)
        return {
          show: $.proxy(css3[options.animation].show, this, $el),
          hide: $.proxy(css3[options.animation].hide, this, $el)
        }
      } else if(options.js){

      } else {

      }

    }
    // 暴露全局变量的形式
    // window.ant = window.ant || {}
    // window.ant.showHide = showHide

    // jQuery插件形式
    $.fn.extend({
      showHide: function(option){
        return this.each(function(){
          var $this = $(this),
              mode = $this.data('showHide');
          
          if(!mode) $this.data('showHide', mode = showHide($this, typeof option === 'object' && option))
            
          if(typeof mode[option] === 'function'){
            mode[option]()
          }

        })
      }
    })

    var showHide = ant.showHide($box, {
      css3: true,
      animation: 'fade'
    })
  </script>
  <style>
    .transition{
      transition:all .5s;
    }
  </style>
</body>
</html>